<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>Metronic Frotnend | Features - Buttons</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>       
    <!-- END GLOBAL MANDATORY STYLES -->
    <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>    
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>
	<!-- BEGIN STYLE CUSTOMIZER -->
	<div class="color-panel hidden-phone">
		<div class="color-mode-icons icon-color"></div>
		<div class="color-mode-icons icon-color-close"></div>
		<div class="color-mode">
			<p>THEME COLOR</p>
			<ul class="inline">
				<li class="color-blue current color-default" data-style="blue"></li>
				<li class="color-red" data-style="red"></li>
				<li class="color-green" data-style="green"></li>
				<li class="color-orange" data-style="orange"></li>
			</ul>
		</div>
	</div>
	<!-- END BEGIN STYLE CUSTOMIZER -->    

    <!-- BEGIN HEADER -->
    <div class="front-header">
	    <div class="container">
	        <div class="navbar">
	            <div class="navbar-inner">
	                <!-- BEGIN LOGO (you can use logo image instead of text)-->
	                <a class="brand logo-v1" href="index.html">
                        <img src="assets/img/logo_blue.png" id="logoimg" alt="">
	                </a>
	                <!-- END LOGO -->

	                <!-- BEGIN RESPONSIVE MENU TOGGLER -->
	                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                    <span class="icon-bar"></span>
	                </a>
	                <!-- END RESPONSIVE MENU TOGGLER -->

	                <!-- BEGIN TOP NAVIGATION MENU -->
	                <div class="nav-collapse collapse">
	                    <ul class="nav">
	                        <li class="dropdown">
	                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
	                                Home
	                                <i class="icon-angle-down"></i>
	                            </a>
	                            <ul class="dropdown-menu">
	                                <li><a href="index.html">Home Default</a></li>
	                                <li><a href="page_home2.html">Home with Top Bar</a></li>
	                            </ul>
	                        </li>
	                        <li><a href="page_about.html">About Us</a></li>
	                        <li><a href="page_services.html">Services</a></li>
	                        <li class="dropdown active">
	                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
	                                Features
	                                <i class="icon-angle-down"></i>
	                            </a>
	                            <ul class="dropdown-menu">
	                                <li><a href="feature_typography.html">Typography</a></li>
	                                <li class="active"><a href="feature_buttons.html">Buttons</a></li>
	                                <li><a href="feature_forms.html">Forms</a></li>                                
									<li><a href="feature_icons.html">Icons</a></li>
	                            </ul>
	                        </li>                        
	                        <li class="dropdown">
	                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
	                                Portfolio
	                                <i class="icon-angle-down"></i>
	                            </a>
	                            <ul class="dropdown-menu">
	                                <li><a href="portfolio_4.html">Portfolio 4</a></li>
	                                <li><a href="portfolio_3.html">Portfolio 3</a></li>
	                                <li><a href="portfolio_2.html">Portfolio 2</a></li>
	                                <li><a href="portfolio_item.html">Portfolio Item</a></li>
	                            </ul>
	                        </li>
	                        <li><a href="page_prices.html">Prices</a></li>
	                        <li class="dropdown">
	                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
	                                Blog
	                                <i class="icon-angle-down"></i>
	                            </a>
	                            <ul class="dropdown-menu">
	                                <li><a href="blog.html">Blog Page</a></li>
	                                <li><a href="blog_item.html">Blog Item</a></li>
	                            </ul>
	                        </li>
	                        <li><a href="page_contacts.html">Contact</a></li>
	                        <li class="menu-search">
	                            <span class="sep"></span>
	                            <i class="icon-search search-btn"></i>
	                        </li>
	                    </ul>
	                    <div class="search-box">
	                        <div class="input-append">
	                            <form>
	                                <input style="background:#fff;" class="m-wrap" type="text" placeholder="Search" />
	                                <button type="submit" class="btn theme-btn">Go</button>
	                            </form>
	                        </div>
	                    </div>                            
	                </div>
	                <!-- BEGIN TOP NAVIGATION MENU -->
	            </div>
	        </div>
	    </div>
    </div>        
    <!-- END HEADER -->

    <!-- BEGIN BREADCRUMBS -->   
    <div class="row-fluid breadcrumbs margin-bottom-40">
        <div class="container">
            <div class="span4">
                <h1>Buttons</h1>
            </div>
            <div class="span8">
                <ul class="pull-right breadcrumb">
                    <li><a href="index.html">Home</a> <span class="divider">/</span></li>
                    <li><a href="">Features</a> <span class="divider">/</span></li>
                    <li class="active">Buttons</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END BREADCRUMBS -->

    <!-- BEGIN CONTAINER -->   
    <div class="container min-hight">
		<!-- TWO COLUMNS -->
		<div class="row-fluid margin-bottom-40">
			<!-- FIRST COLUMN -->
			<div class="span6">					
				<!-- BUTTONS -->
				<div class="row-fluid">
					<h3>Buttons</h3>
					<p>            
						<button type="button" class="btn">Default</button>
						<button type="button" class="btn red">Primary</button>
						<button type="button" class="btn blue">Info</button>           
						<button type="button" class="btn green">Success</button>
					</p>
					<div class="btn-group margin-bottom-10">
						<button class="btn">Left</button>
						<button class="btn">Middle</button>
						<button class="btn">Right</button>
					</div>
					<p>
						<a href="#" class="btn red-stripe">Red Stripe</a>
						<a href="#" class="btn purple-stripe">Purple stripe</a>
					</p>
					<p>
						<a href="#" class="btn disabled">Disabled</a>
						<a href="#" class="btn blue disabled">Disabled</a>
						<a href="#" class="btn red disabled">Disabled</a>
						<a href="#" class="btn green disabled">Disabled</a>
					</p>
					<p>
						<a href="#" class="btn red mini">Mini size</a>
						<a href="#" class="btn blue">Default size</a>
						<a href="#" class="btn green big">Large size</a>
					</p>
					<p>
						<button class="btn purple">Button <i class="m-icon-swapright m-icon-white"></i></button>
						<input type="submit" class="btn red" value="Submit"/>
						<a href="#" class="btn black">Link <i class="m-icon-swapright m-icon-white"></i></a>
					</p>						
				</div>
				<!-- END BUTTONS -->
				
				<!-- ICON BUTTONS -->
				<div class="row-fluid">
					<h3>Icon Buttons</h3>
					<p>Examples to use buttons with font awesome icons.</p>
					<p>
						<a href="#" class="btn icn-only"><i class="icon-share"></i></a>
						<a href="#" class="btn red icn-only"><i class="icon-remove icon-white"></i></a>
						<a href="#" class="btn blue icn-only"><i class="m-icon-swapright m-icon-white"></i></a>
						<a href="#" class="btn green icn-only"><i class="icon-user icon-white"></i></a>
					</p>
					<p>Buttons with both text and icon.</p>
					<p>   
						<a href="#" class="btn mini red"><i class="icon-trash"></i> Delete Item</a>
						<a href="#" class="btn"><i class="icon-plus"></i> Add Item</a>
						<a class="btn purple-stripe">Listen <i class="icon-headphones"></i></a>
					</p>
					<p>   
						<a href="#" class="btn blue"><i class="icon-plus"></i> Submit Entry</a>
						<a class="btn purple big">pricing options <i class="m-icon-big-swapright m-icon-white"></i></a>
					</p>
					<p>Navigation icons.</p>
					<p>
						<a href="#" class="btn bigicn-only"><i class="m-icon-big-swapleft"></i></a>
						<a href="#" class="btn bigicn-only green"><i class="m-icon-big-swapright m-icon-white"></i></a>
						<a href="#" class="btn bigicn-only blue"><i class="m-icon-big-swapdown m-icon-white"></i></a>
						<a href="#" class="btn bigicn-only black"><i class="m-icon-big-swapup m-icon-white"></i></a>
					</p>
					<p>
						<a href="#" class="btn icn-only"><i class="m-icon-swapleft"></i></a>
						<a href="#" class="btn icn-only green"><i class="m-icon-swapright m-icon-white"></i></a>
						<a href="#" class="btn icn-only blue"><i class="m-icon-swapdown m-icon-white"></i></a>
						<a href="#" class="btn icn-only black"><i class="m-icon-swapup m-icon-white"></i></a>
					</p>
					<p>Toolbar icon example</p>
					<div class="btn-group hidden-phone">
						<a href="javascript:;" class="btn">Tools</a>
						<a href="javascript:;" class="btn">Settings</a>
						<a href="javascript:;" class="btn active">About</a>
						<a href="javascript:;" class="btn">Help</a>
						<a href="javascript:;" class="btn">Contact</a>
					</div>
					<div class="btn-group visible-phone">
						<a href="javascript:;" class="btn">Tools</a>
						<a href="javascript:;" class="btn">Settings</a>
						<a href="javascript:;" class="btn active">About</a>
					</div>
					<div class="btn-group visible-phone">
						<a href="javascript:;" class="btn">Help</a>
						<a href="javascript:;" class="btn">Contact</a>
					</div>
					<div class="btn-group hidden-phone margin-top-10">
						<button class="btn"><i class="icon-step-backward"></i></button>
						<button class="btn"><i class="icon-fast-backward"></i></button>
						<button class="btn"><i class="icon-backward"></i></button>
						<button class="btn"><i class="icon-play"></i></button>
						<button class="btn"><i class="icon-stop"></i></button>
						<button class="btn"><i class="icon-forward"></i></button>
						<button class="btn"><i class="icon-fast-forward"></i></button>
						<button class="btn"><i class="icon-step-forward"></i></button>
					</div>
					<div class="btn-group visible-phone">
						<button class="btn"><i class="icon-step-backward"></i></button>
						<button class="btn"><i class="icon-fast-backward"></i></button>
						<button class="btn"><i class="icon-backward"></i></button>
						<button class="btn"><i class="icon-play"></i></button>
					</div>
					<div class="btn-group visible-phone">
						<button class="btn"><i class="icon-stop"></i></button>
						<button class="btn"><i class="icon-forward"></i></button>
						<button class="btn"><i class="icon-fast-forward"></i></button>
						<button class="btn"><i class="icon-step-forward"></i></button>
					</div>
				</div>
				<!-- END ICON BUTTONS -->						
			</div>
			<!-- END FIRST COLUMN -->

			<!-- SECOND COLUMN -->
			<div class="span6">				

				<div class="row-fluid">
					<h3>Social Icons</h3>
					<ul class="social-icons">
						<li><a href="#" data-original-title="amazon" class="amazon"></a></li>
						<li><a href="#" data-original-title="behance" class="behance"></a></li>
						<li><a href="#" data-original-title="blogger" class="blogger"></a></li>
						<li><a href="#" data-original-title="deviantart" class="deviantart"></a></li>
						<li><a href="#" data-original-title="dribbble" class="dribbble"></a></li>
						<li><a href="#" data-original-title="dropbox" class="dropbox"></a></li>
						<li><a href="#" data-original-title="facebook" class="facebook"></a></li>
						<li><a href="#" data-original-title="forrst" class="forrst"></a></li>
						<li><a href="#" data-original-title="github" class="github"></a></li>
						<li><a href="#" data-original-title="Goole Plus" class="googleplus"></a></li>
						<li><a href="#" data-original-title="jolicloud" class="jolicloud"></a></li>
						<li><a href="#" data-original-title="last-fm" class="last-fm"></a></li>
						<li><a href="#" data-original-title="linkedin" class="linkedin"></a></li>
						<li><a href="#" data-original-title="picasa" class="picasa"></a></li>
						<li><a href="#" data-original-title="pintrest" class="pintrest"></a></li>
						<li><a href="#" data-original-title="rss" class="rss"></a></li>
						<li><a href="#" data-original-title="skype" class="skype"></a></li>
						<li><a href="#" data-original-title="spotify" class="spotify"></a></li>
						<li><a href="#" data-original-title="stumbleupon" class="stumbleupon"></a></li>
						<li><a href="#" data-original-title="tumblr" class="tumblr"></a></li>
						<li><a href="#" data-original-title="twitter" class="twitter"></a></li>
						<li><a href="#" data-original-title="vimeo" class="vimeo"></a></li>
						<li><a href="#" data-original-title="wordpress" class="wordpress"></a></li>
						<li><a href="#" data-original-title="xing" class="xing"></a></li>
						<li><a href="#" data-original-title="yahoo" class="yahoo"></a></li>
						<li><a href="#" data-original-title="youtube" class="youtube"></a></li>
						<li><a href="#" data-original-title="vk" class="vk"></a></li>
						<li><a href="#" data-original-title="instagram" class="instagram"></a></li>
					</ul>
					<h3>Social Icons(Colored)</h3>
					<ul class="social-icons social-icons-color">
						<li><a href="#" data-original-title="amazon" class="amazon"></a></li>
						<li><a href="#" data-original-title="behance" class="behance"></a></li>
						<li><a href="#" data-original-title="blogger" class="blogger"></a></li>
						<li><a href="#" data-original-title="deviantart" class="deviantart"></a></li>
						<li><a href="#" data-original-title="dribbble" class="dribbble"></a></li>
						<li><a href="#" data-original-title="dropbox" class="dropbox"></a></li>
						<li><a href="#" data-original-title="facebook" class="facebook"></a></li>
						<li><a href="#" data-original-title="forrst" class="forrst"></a></li>
						<li><a href="#" data-original-title="github" class="github"></a></li>
						<li><a href="#" data-original-title="Goole Plus" class="googleplus"></a></li>
						<li><a href="#" data-original-title="jolicloud" class="jolicloud"></a></li>
						<li><a href="#" data-original-title="last-fm" class="last-fm"></a></li>
						<li><a href="#" data-original-title="linkedin" class="linkedin"></a></li>
						<li><a href="#" data-original-title="picasa" class="picasa"></a></li>
						<li><a href="#" data-original-title="pintrest" class="pintrest"></a></li>
						<li><a href="#" data-original-title="rss" class="rss"></a></li>
						<li><a href="#" data-original-title="skype" class="skype"></a></li>
						<li><a href="#" data-original-title="spotify" class="spotify"></a></li>
						<li><a href="#" data-original-title="stumbleupon" class="stumbleupon"></a></li>
						<li><a href="#" data-original-title="tumblr" class="tumblr"></a></li>
						<li><a href="#" data-original-title="twitter" class="twitter"></a></li>
						<li><a href="#" data-original-title="vimeo" class="vimeo"></a></li>
						<li><a href="#" data-original-title="wordpress" class="wordpress"></a></li>
						<li><a href="#" data-original-title="xing" class="xing"></a></li>
						<li><a href="#" data-original-title="yahoo" class="yahoo"></a></li>
						<li><a href="#" data-original-title="youtube" class="youtube"></a></li>
						<li><a href="#" data-original-title="vk" class="vk"></a></li>
						<li><a href="#" data-original-title="instagram" class="instagram"></a></li>
					</ul>
				</div>

				<!-- BLOCK BUTTONS -->
				<div class="row-fluid">
					<h3>Block Buttons</h3>
					<p>
						<button class="btn blue btn-block">Button <i class="m-icon-swapright m-icon-white"></i></button>
						<input type="submit" class="btn blue btn-block" value="Submit"/>
						<a href="#" class="btn blue btn-block">Link <i class="m-icon-swapright m-icon-white"></i></a>
					</p>
					<p>
						<button class="btn green big btn-block">Button(big)<i class="m-icon-big-swapright m-icon-white"></i></button>
						<input type="submit" class="btn green big btn-block" value="Submit(big)"/>
						<a href="#" class="btn green big btn-block">Link(big)<i class="m-icon-big-swapright m-icon-white"></i></a>
					</p>
				</div>
				<!-- END BLOCK BUTTONS -->
				
				<!-- DROPDOWNS -->
				<div class="row-fluid">
					<h3>Dropdowns</h3>
					<h4>Dropdown buttons</h4>
					<div class="btn-group">
						<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
						Tools <i class="icon-angle-down"></i>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Settings</a></li>
							<li><a href="#">Preferences</a></li>
							<li><a href="#">Window Options</a></li>
							<li><a href="#">Help</a></li>
						</ul>
					</div>
					<div class="btn-group">
						<button class="btn red dropdown-toggle" data-toggle="dropdown">Primary <i class="icon-angle-down"></i></button>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<div class="btn-group">
						<button class="btn purple dropdown-toggle" data-toggle="dropdown">Success <i class="icon-angle-down"></i>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<div class="btn-toolbar hide">
						<div class="btn-group">
							<button class="btn green dropdown-toggle" data-toggle="dropdown">Success <i class="icon-angle-down"></i>
							</button>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<!-- /btn-group -->
						<div class="btn-group">
							<button class="btn blue dropdown-toggle" data-toggle="dropdown">Info <i class="icon-angle-down"></i>
							</button>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<!-- /btn-group -->
						<div class="btn-group">
							<button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse <i class="icon-angle-down"></i>
							</button>
							<ul class="dropdown-menu opens-left">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>
						<!-- /btn-group -->
					</div>
					<h4>Dropdown button with icons</h4>
					<div class="btn-toolbar">
						<div class="btn-group">
							<a class="btn green" href="#" data-toggle="dropdown">
							<i class="icon-user"></i> User
							<i class="icon-angle-down"></i>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
								<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
								<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
								<li class="divider"></li>
								<li><a href="#"><i class="i"></i> Make admin</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<a class="btn purple" href="#" data-toggle="dropdown">
							<i class="icon-user"></i> Settings
							<i class="icon-angle-down"></i>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="icon-plus"></i> Add</a></li>
								<li><a href="#"><i class="icon-trash"></i> Edit</a></li>
								<li><a href="#"><i class="icon-remove"></i> Delete</a></li>
								<li class="divider"></li>
								<li><a href="#"><i class="i"></i> Full Settings</a></li>
							</ul>
						</div>
					</div>
					<h4>Dropup menu options.</h4>
					<!-- /btn-group -->
					<div class="btn-group">
						<button class="btn blue dropdown-toggle" data-toggle="dropdown">Info <i class="icon-angle-down"></i>
						</button>
						<ul class="dropdown-menu bottom-up">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
					<div class="btn-group">
						<button class="btn black dropdown-toggle" data-toggle="dropdown">Inverse <i class="icon-angle-down"></i>
						</button>
						<ul class="dropdown-menu bottom-up">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /btn-group -->
					<p>
						<span class="label label-success">NOTE:</span>&nbsp;
						By adding <code>bottom-up</code> class you make dropup menu.
					</p>						
				</div>
				<!-- END DROPDOWNS -->					
			</div>
			<!-- END SECOND COLUMN -->				
		</div>
		<!-- END TWO COLUMNS -->
    </div>
    <!-- END CONTAINER -->

    <!-- BEGIN FOOTER -->
    <div class="front-footer">
        <div class="container">
            <div class="row-fluid">
                <div class="span4 space-mobile">
                    <!-- BEGIN ABOUT -->                    
                    <h2>About</h2>
                    <p class="margin-bottom-30">Vivamus imperdiet felis consectetur onec eget orci adipiscing nunc. Pellentesque fermentum, ante ac interdum ullamcorper.</p>
                    <div class="clearfix"></div>                    
                    <!-- END ABOUT -->          

                    <h2>Photos Stream</h2>
                    <!-- BEGIN BLOG PHOTOS STREAM -->
                    <div class="blog-photo-stream margin-bottom-30">
                        <ul class="unstyled">
                            <li><a href="#"><img src="assets/img/people/img5-small.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img1.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/people/img4-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img6.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/pics/img1-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/pics/img2-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img3.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/people/img2-large.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img2.jpg" alt=""></a></li>
                            <li><a href="#"><img src="assets/img/works/img5.jpg" alt=""></a></li>
                        </ul>                    
                    </div>
                    <!-- END BLOG PHOTOS STREAM -->                              
                </div>
                <div class="span4 space-mobile">
                    <!-- BEGIN CONTACTS -->                                    
                    <h2>Contact Us</h2>
                    <address class="margin-bottom-40">
                        Loop, Inc. <br />
                        795 Park Ave, Suite 120 <br />
                        San Francisco, CA 94107 <br />
                        P: (234) 145-1810 <br />
                        Email: <a href="mailto:info@keenthemes.com">info@keenthemes.com</a>                        
                    </address>
                    <!-- END CONTACTS -->                                    

                    <!-- BEGIN SUBSCRIBE -->                                    
                    <h2>Monthly Newsletter</h2>  
                    <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
                    <form action="#" class="form-search">
                        <div class="input-append">
                            <input style="background:#fff;" class="m-wrap" type="text"><button class="btn theme-btn" type="button">SUBSCRIBE</button>
                        </div>
                    </form>
                    <!-- END SUBSCRIBE -->                                    
                </div>
                <div class="span4">
                    <!-- BEGIN TWITTER BLOCK -->                                                    
                    <h2>Latest Tweets</h2>
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Imperdiet condimentum diam dolor lorem sit consectetur adipiscing
                            <span>3 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Sequat ipsum dolor onec eget orci fermentum condimentum lorem sit consectetur adipiscing
                            <span>8 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Remonde sequat ipsum dolor lorem sit consectetur adipiscing
                            <span>12 min ago</span>
                        </dd>
                    </dl>                    
                    <dl class="dl-horizontal f-twitter">
                        <dt><i class="icon-twitter"></i></dt>
                        <dd>
                            <a href="#">@keenthemes</a>
                            Pilsum dolor lorem sit consectetur adipiscing orem sequat
                            <span>16 min ago</span>
                        </dd>
                    </dl>                    
                    <!-- END TWITTER BLOCK -->                                                                        
                </div>
            </div>
        </div>
    </div>
    <!-- END FOOTER -->

    <!-- BEGIN COPYRIGHT -->
    <div class="front-copyright">
        <div class="container">
            <div class="row-fluid">
                <div class="span8">
                    <p>
                        <span class="margin-right-10">2013 © Metronic. ALL Rights Reserved.</span> 
                        <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
                    </p>
                </div>
                <div class="span4">
                    <ul class="social-footer">
                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                        <li><a href="#"><i class="icon-google-plus"></i></a></li>
                        <li><a href="#"><i class="icon-dribbble"></i></a></li>
                        <li><a href="#"><i class="icon-linkedin"></i></a></li>
                        <li><a href="#"><i class="icon-twitter"></i></a></li>
                        <li><a href="#"><i class="icon-skype"></i></a></li>
                        <li><a href="#"><i class="icon-github"></i></a></li>
                        <li><a href="#"><i class="icon-youtube"></i></a></li>
                        <li><a href="#"><i class="icon-dropbox"></i></a></li>
                    </ul>                
                </div>
            </div>
        </div>
    </div>
    <!-- END COPYRIGHT -->

    <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
    <!-- BEGIN CORE PLUGINS -->
    <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>            
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->   
    <!-- END CORE PLUGINS -->
    <script src="assets/scripts/app.js"></script>      
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();
            App.initUniform();
        });
    </script>
    <!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>